<html>
  <head>
    <script type="text/javascript" src="jquery-1.3.2.js"></script>
    <script type="text/javascript" src="jquery.validate.js"></script>
    <script type="text/javascript" src="jquery.url.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
		$("#sid").show();  	
		$("#uid").hide();       	
		$("#cid").hide();       	
    	 $.validator.addMethod("noSpecialChars", function(value, element) {
    		      return this.optional(element) || /^[a-z0-9\.]+$/i.test(value);
    		  }, "Username must contain only letters, numbers, or dots.");

		$("#signformid").validate();       	
   
		$("#createformid").validate({
    			 rules: {
    			pwd: "required",
    			sece: "email"
    		  /*  rpwd: {equalTo: "#pwd"},    		    		    
    		    pwd: {
    		        required: true,
    		        minlength: 5
    		      }    		 */   
        		}
        	});
    		$("#updateformid").validate();       	
	
		$("#deleteformid").validate();       	

		/*$("#ufname").val(jQuery.url.param("fname"));
		$("#ulname").val(jQuery.url.param("lname"));
		$("#ulid").val(jQuery.url.param("logn"));
		$("#upwd").val(jQuery.url.param("pwd"));	
		$("#uname").val(jQuery.url.param("fname"));		
		$("#dname").val(jQuery.url.param("fname"));*/

	
          $("#signid").click(function (){
                 alert("Do you Want to Sign In");
                  $.ajax({
				url:"http://localhost:8090/ajaxservlet/AjaxServlet?slogn="+$("#slogn").val()+"&spwd="+$("#spwd").val(),                     		                         success:function(xmlHttp){
                            // xmlHttp is a XMLHttpRquest object
				alert(xmlHttp);
				if(xmlHttp=="Login SuccessFully"){
					$("#uname").val($("#slogn").val());
					$("#dname").val($("#slogn").val());

					$("#ulogn").val($("#slogn").val());
				$("#uid").show();  	
				$("#cid").hide();       	
				$("#sid").hide(); 
				}
                                  //$("#sid").html(xmlHttp);
                          	}
                        });
	}); 
	
	$("#signupid").click(function (){
                 alert("do you want create new account");
                  $("#cid").show();  	
		$("#uid").hide();       	
		$("#sid").hide(); 
	}); 

//create account servlet
	$("#createid").click(function (){
                 alert("New Account");
                  $.ajax({
				url:"http://localhost:8090/ajaxservlet/GetServlet?cfname="+$("#cfname").val()+"&clname="+$("#clname").val()+"&clogn="+$("#clogn").val()+"&cpwd="+$("#cpwd").val()+"&selq="+$("#selq").val()+"&ans="+$("#ans").val()+"&sece="+$("#sece").val()+"&country="+$("#country").val()+"&hidden="+$("#hidden").val(),
			success:function(xmlHttp){
                            // xmlHttp is a XMLHttpRquest object
				alert(xmlHttp);
				$("#uid").hide();  	
				$("#cid").hide();       	
				$("#sid").hide(); 
                                $("#mainid").html(xmlHttp);
                          }
                        });
	}); 

//update account servlet
		$("#updateid").click(function (){
                 alert("You want to Update your Account");
                  $.ajax({
				url:"http://localhost:8090/ajaxservlet/GetServlet?ufname="+$("#ufname").val()+"&ulname="+$("#ulname").val()+"&ulogn="+$("#ulogn").val()+"&upwd="+$("#upwd").val()+"&uname="+$("#uname").val()+"&hidden="+$("#update").val(),
				success:function(xmlHttp){
                            // xmlHttp is a XMLHttpRquest object
				alert(xmlHttp);
				$("#uid").hide();  	
				$("#cid").hide();       	
				$("#sid").hide(); 
                                $("#mainid").html(xmlHttp);
                          }
                        });
		});

//delete account servlet
		$("#deleteid").click(function (){
                 alert("You want to delete your Account");
                  $.ajax({
				url:"http://localhost:8090/ajaxservlet/GetServlet?dname="+$("#dname").val()+"&hidden="+$("#delete").val(),
			success:function(xmlHttp){
                            // xmlHttp is a XMLHttpRquest object
				alert(xmlHttp);
				$("#uid").hide();  	
				$("#cid").hide();       	
				$("#sid").hide(); 
                                $("#mainid").html(xmlHttp);
                          }
                        });
	});  

});
    </script>
  </head>
  <body>
<center>
<div id="mainid">
<div class="body" id="uid">
<form id="updateformid"  method="get">
<h2>Account Login Successfully </h2>
  <h3>
  Edit/delete an Account
</h3>
<div style="border:3px solid skyblue" >
<table>
<tr height=10><td></td></tr>
<tr><td style="color:blue" height=20 ><b>Update/Delete with Gmail</b></td></tr>
<tr><td></td></tr>
<tr height=0><td><b>First Name</b></td>
<td><b><input type="text" class="required || digit"  name="ufname" id="ufname" value=""></b></td></tr>
<tr height=50><td><b>Last Name</b></td>
<td><b><input type="text" class="required" name="ulname" id="ulname"></b></td></tr>
<tr height=0><td><b>Desired Login Name</b></td>
<td><b><input type="text" class="required noSpecialChars" name="ulogn" id="ulogn"></b><i>@gmail.com</i></td></tr>
<tr height=50><td><b>Password</b></td>
<td><b><input type="password" class="required" name="upwd" minlength=5 id="upwd"></b></td></tr>
  <tr><td><input type="hidden" name="hidden" id="update" value="update" ></td></tr>
<tr height=50><td><input type="hidden" name="uname" id="uname"></td>
  <td><input type="button" value="Update Record" id="updateid" size=30></td></tr>
<tr>
</form>
<form id="deleteformid" method="get">
<td><input type="hidden" name="hidden" id="delete" value="delete" ><input type="hidden" name="dname" id="dname"></td>
<td><input type="button" value="Delete Record" id="deleteid" size=30></td></form>
</table></div> </div>


<div class="body" id="cid">
<form id="createformid" method="get">
  <center>
  <h3>
  Create an Account
</h3>
<table width="700">
  <tr>
  <td>
  <font size="-1">
  Your Google Account gives you access to Gmail and <a href="http://www.google.com/help/faq_accounts.html" target="_blank">other Google services</a>.
  </font>

  <font size="-1">
  If you already have a Google Account, you can <a href='Login?continue=http%3A%2F%2Fmail.google.com%2Fmail%2Fe-11-1185fa01ddf1d5686f3e79516b96e169-a0a79664c72baf66b4bf095da1911f85764989fa&amp;service=mail&amp;type=2' >sign in here</a>.
  </font>
  </td>
  </tr>
</table> 
<div style="border:3px solid skyblue" >
<table>
<tr height=10><td></td></tr>
<tr><td style="color:blue" height=20 ><b>Get Started with Gmail</b></td></tr>
<tr><td></td></tr>
<tr height=0><td><b>First Name</b></td>
<td><b><input type="text" class="required || digit"  name="cfname" id="cfname" value=""></b></td></tr>
<tr height=50><td><b>Last Name</b></td>
<td><b><input type="text" class="required" name="clname" id="clname"></b></td></tr>
<tr height=0><td><b>Desired Login Name</b></td>
<td><b><input type="text" class="required noSpecialChars" name="clogn" id="clogn"></b><i>@gmail.com</i></td></tr>
<tr height=0><td></td><td>jsmith,smith.john,john.smith etc</td></tr>
<tr height=50><td></td>
  <td><input type="button" value="Check Availability!" id="checkid" size=30></td></tr>
<tr height=50><td><b>Choose a Password</b></td>
<td><b><input type="password" class="required" name="cpwd" minlength=5 id="cpwd"></b></td></tr>
<tr height=0><td><b>Re-enter Password</b></td>
<td><b><input type="password" class="required" name="crepwd" equalto="#cpwd" id="crepwd"></b></td></tr>
<tr height=50><td><b>Security Question</b></td>
<td><b> <select id="selq" name="selq" class="required"
            onchange="javascript:onLocChange()" >
  <option value="">
  Choose your Question...
  </option>
  <option value="What is your primary teacher name?">
  What is your primary teacher name?
  </option>
  <option value="What is your peat name?">
  What is your peat name?
  </option>
  <option value="What is your girlfriend name?">
  What is your girlfriend name?
  </option>
  <option value="  What is your boyfriend name?">
  What is your boyfriend name?
  </option></select></b></td>
 <tr height=50><td><b>Answer</b></td>
<td><b><input type="text" size=50 class="required" name="ans" id="ans"></b></td></tr>
 <tr height=50><td><b>Secondary Email</b></td>
<td><b><input type="text" class="required" name="sece"id="sece" size=30></b></td></tr>
 <tr height=50><td><b>Location</b></td>
<td><b> <select id="country" name="country" class="required"
            onchange="javascript:onLocChange()" >
  <option value="">
  Choose your Location....
  </option>
  <option value="India">
  India
  </option>
  <option value="United Kingdom">
  United Kingdom
  </option>
  <option value="United State">
  United State
  </option>
  <option value="Russia">
  Russia
  </option>
  <option value="Austrellia">
  Austrellia
  </option>
 <option value="Irland">
  Irland
  </option>  
  </tr>
  <tr height=50><td><input type="hidden" name="hidden" id="hidden" value="insert" ></td>
  <td><input type="button" value="I accept,create my account" id="createid" size=30></td></tr>
</table></div></div>
</form>
<div class="body" id="sid">
<form id="signformid">  
<center>
    <h3>
  Sign In/Up an Account
</h3>
<div style="border:3px solid skyblue" >
<table>
<tr height=10><td></td></tr>
<tr><td style="color:blue" height=20 ><b>Login with Gmail</b></td></tr>
<tr><td></td></tr>
<tr height=0><td><b>Login Name</b></td>
<td><b><input type="text" class="required noSpecialChars" name="slogn" id="slogn"></b><i>@gmail.com</i></td></tr>
<tr height=50><td><b>Password</b></td>
<td><b><input type="password" class="required" name="spwd" minlength=5 id="spwd"></b></td></tr>
  <tr height=50><td><input type="button" value="SignUp" id="signupid" size=30></a></td>
  <td><input type="button" value="SignIn" id="signid" size=30></td></tr>
<tr></div></div>
</form>
</div>
  </body>
</html>

